<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div id="cont">4</div>
  <div id="cont">5</div>
  <div id="cont">6</div>
  <div class="cont">
    <div class="xbox">
      <h2>标题1</h2>
      <h2>标题2</h2>
    </div>
    <h2>标题3</h2>
    <h2>标题4</h2>
  </div>
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <input type="text" name="username">
  <input type="text" name="password">
  <input type="text" name="password">
</body>
<script>

  // query：document.querySelector()
  // 支持css选择器写法
  // 只能选中第一个符合的元素，如果一个符合的都没有，返回null

  // var ele1 = document.querySelector(".box");
  // console.log(ele1);
  // var ele2 = document.querySelector("#cont")
  // console.log(ele2);
  // var ele3 = document.querySelector("span")
  // console.log(ele3);
  // var ele4 = document.querySelector("span, .box")
  // console.log(ele4);
  // var ele5 = document.querySelector(".cont .xbox")
  // console.log(ele5);
  // var ele6 = document.querySelector(".cont>h2")
  // console.log(ele6);
  // var ele7 = document.querySelector(".cont+span")
  // console.log(ele7);
  // var ele8 = document.querySelector(".cont~span")
  // console.log(ele8);


  // queryAll：document.querySelectorAll()
  // 支持css选择器写法
  // 哪怕只有一个符合要求的元素，也是以数组的形式返回

  // var ele1 = document.querySelectorAll(".box");
  // console.log(ele1);
  // var ele2 = document.querySelectorAll("#cont")
  // console.log(ele2);
  // var ele3 = document.querySelectorAll("span")
  // console.log(ele3);
  // var ele4 = document.querySelectorAll("span, .box")
  // console.log(ele4);
  // var ele5 = document.querySelectorAll(".cont h2")
  // console.log(ele5);
  // var ele6 = document.querySelectorAll(".cont>h2")
  // console.log(ele6);
  // var ele7 = document.querySelectorAll(".cont+span")
  // console.log(ele7);
  // var ele8 = document.querySelectorAll(".cont~span")
  // console.log(ele8);
  
</script>
</html>